import { FormSchema } from "@/components/Form";
import Icon from "@/components/SvgIcon";
import { BasicColumn } from "@/components/Table";
import { tableDateFormat } from "@/utils/dateUtils";
import { ElRadioButton, ElInput } from "element-plus";
import { h, resolveComponent, markRaw, shallowRef, isShallow } from "vue";
import { Recordable } from "/#/global";

// cache: false
// children: [,…]
// createBy: "admin"
// createTime: "2018-12-18T15:11:29"
// frame: false
// hasChildren: true
// hidden: false
// icon: "system"
// id: 1
// label: "系统管理"
// menuSort: 1
// path: "system"
// pid: null
// requiresAuth: true
// subCount: 3
// title: "系统管理"
// type: 0
// updateTime: "2021-07-29T10:07:13"

export const columns: BasicColumn<Recordable>[] = [
  {
    id: "title",
    label: "菜单标题",
    prop: "title",
    minWidth: 80,
  },
  {
    id: "pid",
    label: "上级菜单id",
    prop: "pid",
    minWidth: 80,
  },
  {
    id: "subCount",
    label: "子菜单数",
    prop: "subCount",
    minWidth: 80,
  },
  {
    id: "type",
    label: "菜单类型",
    prop: "type",
    minWidth: 80,
    slots: { customRender: "type" },
  },
  {
    id: "name",
    label: "组件名称",
    prop: "name",
    minWidth: 80,
  },
  {
    id: "component",
    label: "组件地址",
    prop: "component",
    minWidth: 80,
  },
  {
    id: "menuSort",
    label: '排序',
    prop: 'menuSort',
    minWidth: 80,
  },
  {
    id: "createTime",
    label: "创建时间",
    prop: "createTime",
    minWidth: 120,
    formatter: tableDateFormat,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: "account",
    label: "用户名",
    component: "ElInput",
    colProps: { span: 8 },
  },
  {
    field: "nickname",
    label: "昵称",
    component: "ElInput",
    colProps: { span: 8 },
  },
];

const isDir = (type: number) => type === 0;
const isMenu = (type: number) => type === 1;
const isButton = (type: number) => type === 2;

export const menuFormSchema: FormSchema[] = [
  {
    field: "type",
    label: "类型",
    component: "ElRadioGroup",
    defaultValue: 0,
    renderComponentContent: () => {
      const options: Array<string> = ['目录', '菜单', '按钮']
      return () => h(
        "div",
        {},
        // {default:() => [h(ElRadioButton, { label: 0 }, '目录'), h(ElRadioButton, { label: 1 }, '菜单'),h(ElRadioButton, { label: 2 }, '按钮')]}
        {
          default: () => options.map((item, index) => {
            return h(ElRadioButton, { label: index }, { default: () => item });
          })
        }
      )
    },
    componentProps: {
      width: '400px'
    }
  },
  {
    field: "icon",
    label: "菜单图标",
    component: "IconPicker",
    // helpMessage: ["不能输入带有admin的用户名"],
    componentProps: {
      width: '480px',
      mode: 'svg',
      copy: true
    },
    slots: { prefix: () => h(Icon, { icon: "search|svg" }) }
  },
  {
    field: "title",
    label: "菜单标题",
    component: "ElInput",
    // helpMessage: ["不能输入带有admin的用户名"],
    rules: [
      {
        required: true,
        message: "请输入菜单标题",
      },
    ],
    componentProps: {
      width: '480px'
    }
  },
  {
    field: "permission",
    label: "权限标识",
    component: "ElInput",
    // helpMessage: ["不能输入带有admin的用户名"],
    componentProps: {
      width: '180px'
    },
    ifShow: ({ values }) => !isDir(values.type),

  },
  {
    field: 'frame',
    label: "外链菜单",
    component: 'ElRadioGroup',
    defaultValue: false,
    renderComponentContent: (values) => {
      const options: Array<Recordable> = [{
        label: '否',
        value: false
      }, { label: '是', value: true }]
      return () => h(
        "div",
        {},
        // {default:() => [h(ElRadioButton, { label: 0 }, '目录'), h(ElRadioButton, { label: 1 }, '菜单'),h(ElRadioButton, { label: 2 }, '按钮')]}
        {
          default: () => options.map((item) => {
            return h(ElRadioButton, { label: item.value }, { default: () => item.label });
          })
        }
      )
    },
    ifShow: ({ values }) => !isButton(values.type),

    //  componentProps: {
    //   size: 'small'
    // }
  },
  {
    field: 'cache',
    label: "菜单缓存",
    component: 'ElRadioGroup',
    defaultValue: false,
    renderComponentContent: () => {
      const options: Array<Recordable> = [{
        label: '否',
        value: false
      }, { label: '是', value: true }]

      return () => h(
        "div",
        {},
        // {default:() => [h(ElRadioButton, { label: 0 }, '目录'), h(ElRadioButton, { label: 1 }, '菜单'),h(ElRadioButton, { label: 2 }, '按钮')]}
        {
          default: () => options.map((item, index) => {
            return h(ElRadioButton, { label: item.value }, { default: () => item.label });
          })
        }
      )
    },
    ifShow: ({ values }) => isMenu(values.type),

    // componentProps: {
    //   size: 'small'
    // }
  },
  {
    field: 'hidden',
    label: "菜单隐藏",
    component: 'ElRadioGroup',
    defaultValue: false,
    renderComponentContent: () => {
      const options: Array<Recordable> = [{
        label: '否',
        value: false
      }, { label: '是', value: true }]

      return () => h(
        "div",
        {},
        // {default:() => [h(ElRadioButton, { label: 0 }, '目录'), h(ElRadioButton, { label: 1 }, '菜单'),h(ElRadioButton, { label: 2 }, '按钮')]}
        {
          default: () => options.map((item) => {
            return h(ElRadioButton, { label: item.value }, { default: () => item.label });
          })
        }
      )
    },
    ifShow: ({ values }) => !isButton(values.type),

    // componentProps: {
    //   size: 'small'
    // }
  },

  {
    field: "path",
    label: "路由地址",
    component: "ElInput",
    // helpMessage: ["不能输入带有admin的用户名"],
    rules: [
      {
        required: true,
        message: "请输入路由地址",
      },
    ],
    componentProps: {
      width: '180px'
    },
    ifShow: ({ values }) => !isButton(values.type),

  },
  {
    field: "menuSort",
    label: "菜单排序",
    component: "ElInputNumber",
    defaultValue: 999,
    componentProps: {
      width: '180px',
      min: 1,
      max: 999999999,
      controlsPosition: "right"
    }
  },
  {
    field: "name",
    label: "组件名称",
    component: "ElInput",
    // helpMessage: ["不能输入带有admin的用户名"],
    rules: [
      {
        required: true,
        message: "请输入组件名称",
      },
    ],
    componentProps: {
      width: '180px'
    },
    ifShow: ({ values }) => isMenu(values.type),

  },
  {
    field: "component",
    label: "组件地址",
    component: "ElInput",
    // helpMessage: ["不能输入带有admin的用户名"],
    rules: [
      {
        required: true,
        message: "请输入组件地址",
      },
    ],
    componentProps: {
      width: '180px'
    },
    ifShow: ({ values }) => isMenu(values.type),

  },
  {
    field: "pid",
    fieldKey: "id",
    label: "上级类目",
    component: "ElTreeSelect",
    // helpMessage: ["不能输入带有admin的用户名"],
    componentProps: {
      width: '480px',
      data: [],
      nodeKey: "id",
      highlightCurrent: true,
      showCheckbox: true,
      checkStrictly: true,
      defaultExpandAll: true

    }
  },

];
